<template>
  <div class="popBox">
    <b class="el-icon-close" @click="close" />
    <div v-if="type === 'status'" style="height: 260px;width: 500px;">
      <p>修改状态</p>
      <div class="boxCenter">
        <span>状态：</span>
        <el-select v-model="data.status" class="state1" clearable placeholder="请选择">
          <el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <el-button class="button" type="primary" @click="submit">提交</el-button>
    </div>
    <div v-else style="height: 560px;width: 800px;">
      <p>配置生成信息</p>
      <div class="boxCenter addcount">
        <span>目标功能：</span>
        <el-select
          v-for="is, idx in childMenus"
          v-model="is.value"
          class="state2"
          :placeholder="data[`targetFunction${idx + 1}`]"
          @change="(id) => selectChange(id, idx)"
        >
          <el-option v-for="item in is.list" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
        <hr>
        <span>页面类型：</span>
        <el-radio-group v-model="radio">
          <el-radio :label="1" :value="1">一级页面</el-radio>
          <el-radio :label="2" :value="2">非一级页面</el-radio>
        </el-radio-group>
        <hr>
        <span>页面标题：</span>
        <el-input v-model="titleText" class="input" />
        <hr>
        <span>模板程序：</span>
        <el-select v-model="data.templatePage" class="state3">
          <el-option v-for="item in templateList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <hr>
        <span>上传数据模板：</span>
        <div class="uplaodBox">
          <el-upload
            ref="uplaod"
            action=""
            :show-file-list="false"
            :on-change="fileChange"
            :limit="1"
            :auto-upload="false"
          >

            <div v-if="fileName || data.templateUrl" class="fileBtn fileName" @click.stop>
              <span>{{ fileName || data.templateUrl }} </span>
              <b class="el-icon-close" @click.stop="clearFile" /></div>
            <div v-else class="fileBtn uploadBtn"> <img :src="img"> 上传MES Copilot数据模板</div>
          </el-upload>
        </div>
      </div>
      <el-button class="button" type="primary" @click="submit">开始生成</el-button>
    </div>
  </div>
</template>

<script>
import { getChildMenus, uploadTemplate } from '@/api/produce/mesPage'
import img from '@/assets/images/upload1.png'
export default {
  props: {
    data: {
      type: Object,
      default: () => { return {} }
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectOption: [ // 修改状态 下拉
        // {label:'未开始',value:0},
        { label: '进行中', value: 1 },
        { label: '已完成', value: 2 }
      ],
      titleText: '', // 页面标题
      radio: '', // 单选 页面类型
      childMenus: [ // 三级连选 目标功能
        { value: null, list: [] },
        { value: null, list: [] },
        { value: null, list: [] }
      ],
      templateList: [
        { id: 'L002', name: 'L002' },
        { id: 'L002-1', name: 'L002-1' },
        { id: 'L002-2', name: 'L002-2' },
        { id: 'L003', name: 'L003' },
        { id: 'L003-1', name: 'L003-1' },
        { id: 'L003-2', name: 'L003-2' }
        // { id: 'L004', name: 'L004' },
        // { id: 'L005', name: 'L005' },
      ],
      fileName: '', // 模板数据文件名
      files: null, // 模板数据文件file
      img
    }
  },
  created() {
    this.getChildMenus('', 0)
    this.radio = this.data.pageType
    this.titleText = this.data.pageTitle
  },

  methods: {
    async getChildMenus(pid, idx) { // 获取三层目标功能
      this.childMenus[idx].value = null
      if (idx === 1) {
        this.childMenus[idx + 1].value = null
      }
      const res1 = await getChildMenus({ pid })
      let dataList = res1.content
      if (!pid) {
        dataList = dataList.filter(item => item.title === '生产管理' || item.title === '质量管理' || item.title === '设备管理')
      }
      this.childMenus[idx].list = dataList
    },

    selectChange(pId, idx) { // 目标功能下拉选中
      console.log(pId)

      if (idx === 2) {
        this.childMenus[2].list.forEach(item => {
          if (item.id === pId) {
            this.titleText = item.title
          }
        })
      } else {
        this.titleText = ''
        this.getChildMenus(pId, idx + 1)
      }
    },

    fileChange(file) { // 选中文件后立即上传
      if (!this.data.templatePage) {
        this.$refs.uplaod.clearFiles()
        this.$message({
          message: '请先选择模板类型',
          type: 'error'
        })
        return
      }
      this.files = file.raw

      uploadTemplate({
        templatePageEn: this.data.templatePage,
        ...this.getIds()
      }, { file: file.raw }).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.data.templateUrl = res.data
          this.fileName = res.data
          this.$message({
            message: '文件上传成功',
            type: 'success'
          })
        } else {
          this.$refs.uplaod.clearFiles()
        }
      })
    },

    clearFile() { // 清除选中的文件
      this.$refs.uplaod.clearFiles()
      this.fileName = '',
      this.data.templateUrl = ''
      this.files = null
    },
    getIds() {
      const targetFunctionList = {}
      this.childMenus.map((o, i) => { // 提取目标功能选项
        targetFunctionList[`targetFunctionId${i + 1}`] = o.value || this.data[`targetFunctionId${i + 1}`] || 0
      })
      return targetFunctionList
    },

    submit() {
      this.$emit('submit', {
        pageType: this.radio,
        ...this.getIds(),
        templatePage: this.data.templatePage,
        id: this.data.id,
        status: +this.data.status || 1,
        pageTitle: this.titleText,
        createTime: this.data.createTime || Date.now()
      }, this.type)
    },
    close() {
      this.$emit('close')
    }
  }

}

</script>

<style lang="scss" scoped>
.popBox {
    padding: 20px 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    background-color: #fff;
    border-radius: 5px;

    >b {
        position: absolute;
        font-size: 18px;
        cursor: pointer;
        top: 30px;
        right: 30px;
    }

    p {
        font-size: 20px;
    }

    .boxCenter {
        margin: 50px auto 0;
        text-align: center;

        .state1 {
            width: 225px;
        }

        span {
            font-size: 14px;
        }
    }

    .button {
        position: absolute;
        width: 180px;
        height: 36px;
        bottom: 15%;
        left: 50%;
        transform: translate(-50%);
    }

    .addcount {
        text-align: left;
        width: 84%;

        hr {
            margin: 18px 0;
            opacity: 0;
        }

        span {
            width: 130px;
            text-align: right;
            display: inline-block;
        }

        .state2 {
            border-radius: 0;
            width: 140px;
            margin-right: 15px;
        }

        .input {
            width: 450px;
        }

        .state3 {
            width: 260px;
        }

        .uplaodBox {
            display: inline-block;
        }

        .fileBtn {
            color: #1890FF;
            position: relative;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .fileName {
            min-width: 360px;
            max-width: 500px;
            text-align: left;
            top: 5px;
            cursor: auto;
            span{
                width: 95%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            b {
                float: right;
                cursor: pointer;

                &:hover {
                    transform: scale(120%);
                }
            }
        }

        .uploadBtn {
            padding-left: 30px;

            img {
                position: absolute;
                top: -6px;
                left: 0;
            }
        }
    }
}
</style>
<style>
input[aria-hidden=true] {
    display: none !important;
}
</style>
